<template>
  <div class="section">
    <!-- <p class="section_title">
      <span class="title">上传用户信息</span>
    </p> -->
    <p class="section_title">
      <span class="title">
        下载模板
        <span class="tips">（请先下载用户信息模板，按照模板进行填写）</span>
      </span>
    </p>
    <p class="section_title">
      <el-button type="primary" size="medium" @click="down">模板下载</el-button>
    </p>
    <p class="section_title">
      <span class="title">
        上传用户名单
        <span class="tips">（注意请不要对模板字段进行调整）</span>
      </span>
    </p>
    <div class="seciton-con">
      <el-form label-width="100px" size="medium" class="seciton-form">
        <el-upload
          class="upload-demo"
          ref="Uploader1"
          name="UploaderName"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :http-request="uploadImage"
          :limit="limit"
          :on-change="handleChange"
          :before-upload="beforeUpload"
          accept=".xls,.xlsx">
          <el-button
            class="btnBg"
            type="primary"
            size="medium"
            icon="el-icon-upload"
            :loading="loading"
            :disabled="loading">
            {{ !loading ? '上传用户名单' : '上传中...' }}
          </el-button>
        </el-upload>
      </el-form>
      <el-alert v-if="success" title="导入成功" type="success" description="可以继续导入" show-icon></el-alert>
    </div>
  </div>
</template>

<script>
import { importUiasUserDetail, getImportUserTemplate } from '@api/modules/system.js'

export default {
  name: 'PeopleImport',
  props: {
    /* 弹出框现实隐藏 */
    dialogVisible: Boolean,
    /* 是否需要验证激活 1是 0否 */
    verifyActivation: String,
  },
  components: {},
  data() {
    return {
      tenantId: '',
      loading: false,
      fmData: new FormData(),
      fmAppendLength: 0,
      limit: 1,
      success: false,
    }
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        this.success = false
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.tenantId = localStorage.pskh_tenantId
  },
  methods: {
    async uploadImage(file) {
      this.fmData.append('file', file.file)
      this.fmData.append('tenantId', this.tenantId)
      this.loading = true
      try {
        await importUiasUserDetail(this.fmData).then(res => {
          const { status } = res
          if (status === 200) {
            this.$message.success('导入成功')
            this.loading = false
            this.success = true
            this.$emit('success')
          }
        })
      } catch (error) {
        this.success = false
        this.loading = false
      } finally {
        this.loading = false
        this.fmData = new FormData()
        this.$refs.Uploader1.clearFiles()
      }
    },
    handleChange(file, fileList) {
      this.$refs.Uploader1.submit()
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传${this.limit}个`)
    },
    beforeUpload(file, fileList) {
      if (!this.tenantId) {
        this.$message({
          message: '请选择租户',
          type: 'warning',
          duration: 6000,
        })
        return
      }
      const arr = ['.xls', '.xlsx']
      const text = ''
      const flag = arr.includes(file.name.substring(file.name.indexOf('.')))
      if (!flag) {
        this.$message({
          message: text,
          type: 'warning',
          duration: 6000,
        })
        this.fmData = new FormData()
        return false
      }
    },
    setData(formName, status) {
      this.$emit('handleSuccess', false)
    },
    // 关闭
    handleCancel() {
      this.$emit('handleCancel', false)
    },
    down() {
      getImportUserTemplate()
      const link = document.createElement('a')
      link.target = 'targetName'
      link.href = getImportUserTemplate()
      // console.log('link.href :>> ', link.href)
      link.click()
    },
  },
}
</script>

<style lang="scss" scoped>
.section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .section_title {
    // text-align: center;
    padding: 0 20px 20px;
    .title {
      font-size: 15px;
      font-weight: 600;
    }
    .tips {
      color: #999;
      font-size: 14px;
    }
  }
  .seciton-con {
    text-align: center;
    .seciton-form {
      display: flex;
      // justify-content: center;
      .upload-demo {
        margin-left: 20px;
      }
    }
  }
  .footer {
    text-align: right;
    margin-top: 20px;
  }
  .el-alert {
    text-align: left;
    margin: 0 auto;
    width: 35%;
    padding: 8px 16px;
    margin-top: 20px;
  }
}
</style>
